<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="工号：" prop="staff_id">
        <el-input :disabled="form.is_edit" v-model="form.staff_id" placeholder="请输入工号"></el-input>
<!--        <el-input v-if="!props.layer.row" v-model="form.staff_id" placeholder="请输入工号"></el-input>-->
<!--        <el-col  v-if="props.layer.row" >{{form.staff_id}}</el-col>-->
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model="form.age" placeholder="只能输入正整数"></el-input>
      </el-form-item>
<!--      <el-form-item label="部门：" prop="department_id">-->
<!--        <el-input-->
<!--          v-model="form.department_id"-->
<!--          oninput="value=value.replace(/[^\d]/g,'')"-->
<!--          placeholder="只能输入正整数"-->
<!--        ></el-input>-->
<!--      </el-form-item>-->
      <!-- <el-form-item label="选择器：" prop="select">
                <el-select v-model="form.choose" placeholder="请选择" clearable>
                      <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
              </el-form-item> -->
      <el-form-item label="类型：" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio
            v-for="item in typeData"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts">
import type { LayerType } from "@/components/layer/index.vue";
import type { Ref } from "vue";
import type { ElFormItemContext } from "element-plus/lib/el-form/src/token";
import { defineComponent, ref } from "vue";
import { add, update } from "@/api/staff";
import { selectData, typeData } from "./enum";
import Layer from "@/components/layer/index.vue";
export default defineComponent({
  components: {
    Layer,
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: "",
          showButton: true,
        };
      },
    },
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext | null> = ref(null);
    const layerDom: Ref<LayerType | null> = ref(null);
    let form = ref({
      name: "",
      staff_id: "",
      age: "",
      type: "",
      department_id: localStorage.getItem('did'),
      is_edit:false
    });
    const rules = {
      staff_id: [{ required: true, message: "请输入工号", trigger: "blur" }],
      name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      department_id: [{ required: true, message: "请选择", trigger: "blur" }],
      age: [{ required: false, message: "请输入年龄", trigger: "blur" }],
      type: [{ required: true, message: "请选择", trigger: "blur" }],
    };
    init();
    function init() {
      // 用于判断新增还是编辑功能
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row)); // 数量量少的直接使用这个转
        form.value.is_edit=true
      } else {
      }
    }
    return {
      form,
      rules,
      layerDom,
      ruleForm,
      selectData,
      typeData,
      props
    };
  },
  methods: {
    submit() {
      if (this.ruleForm) {
        this.ruleForm.validate((valid) => {
          if (valid) {
            let params = this.form;
            if (this.layer.row) {
              this.updateForm(params);
            } else {
              this.addForm(params);
            }
          } else {
            return false;
          }
        });
      }
    },
    // 新增提交事件
    addForm(params: object) {
      add(params).then((res) => {
        this.$message({
          type: "success",
          message: "新增成功",
        });
        this.$emit("getTableData", true);
        this.layerDom && this.layerDom.close();
      });
    },
    // 编辑提交事件
    updateForm(params: object) {
      update(params).then((res) => {
        this.$message({
          type: "success",
          message: "编辑成功",
        });
        this.$emit("getTableData", false);
        this.layerDom && this.layerDom.close();
      });
    },
  },
});
</script>

<style lang="scss" scoped></style>
